<template>
  <div class="app-container">
    <h2>系统设置</h2>
    <p>这里是系统设置页面</p>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本设置</span>
      </div>
      <el-form :model="settings" label-width="120px">
        <el-form-item label="系统名称">
          <el-input v-model="settings.systemName"></el-input>
        </el-form-item>
        <el-form-item label="系统Logo">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :auto-upload="false">
            <img v-if="settings.logo" :src="settings.logo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="settings.phone"></el-input>
        </el-form-item>
        <el-form-item label="联系邮箱">
          <el-input v-model="settings.email"></el-input>
        </el-form-item>
        <el-form-item label="系统公告">
          <el-input type="textarea" v-model="settings.notice" :rows="4"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSave">保存设置</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>充电设置</span>
      </div>
      <el-form :model="chargingSettings" label-width="120px">
        <el-form-item label="基础电价">
          <el-input-number v-model="chargingSettings.basePrice" :min="0" :max="10" :step="0.1"></el-input-number>
          <span class="unit">元/度</span>
        </el-form-item>
        <el-form-item label="服务费">
          <el-input-number v-model="chargingSettings.serviceFee" :min="0" :max="10" :step="0.1"></el-input-number>
          <span class="unit">元/度</span>
        </el-form-item>
        <el-form-item label="最低消费">
          <el-input-number v-model="chargingSettings.minConsumption" :min="0" :max="100" :step="1"></el-input-number>
          <span class="unit">元</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSaveCharging">保存设置</el-button>
          <el-button @click="handleResetCharging">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "SystemSettings",
  data() {
    return {
      settings: {
        systemName: '充电桩智能管理平台',
        logo: '',
        phone: '400-123-4567',
        email: 'support@example.com',
        notice: '欢迎使用充电桩智能管理平台，如有问题请联系客服。'
      },
      chargingSettings: {
        basePrice: 1.2,
        serviceFee: 0.5,
        minConsumption: 10
      }
    }
  },
  methods: {
    handleSave() {
      this.$message.success('基本设置保存成功')
    },
    handleReset() {
      this.settings = {
        systemName: '充电桩智能管理平台',
        logo: '',
        phone: '400-123-4567',
        email: 'support@example.com',
        notice: '欢迎使用充电桩智能管理平台，如有问题请联系客服。'
      }
    },
    handleSaveCharging() {
      this.$message.success('充电设置保存成功')
    },
    handleResetCharging() {
      this.chargingSettings = {
        basePrice: 1.2,
        serviceFee: 0.5,
        minConsumption: 10
      }
    }
  }
}
</script>

<style scoped>
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}
.avatar-uploader:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.unit {
  margin-left: 10px;
  color: #909399;
}
</style> 